<template>
  <div v-if="proData && comData && ranList">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/company?cid=' + comData.cid }">{{
          comData.cname
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ proData.pname }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="details_header">
      <div class="left">
        <img :src="'/companys/' + picList[now]" alt="" />
        <div>
          <img
            v-for="(src, i) in picList"
            :key="i"
            :src="'/companys/' + src"
            alt=""
            @mouseover="now = i"
            :class="{ active: now === i }"
          />
        </div>
      </div>
      <div class="middle">
        <h2>{{ proData.pname }}</h2>
        <div>
          <span>￥</span>
          <h1>{{ proData.price }}</h1>
          <span>￥{{ proData.price * 2 }}</span>
        </div>
        <p>{{ proData.promise }}</p>
        <div>
          <span>下单有礼</span>
          <div>
            <p v-for="(gift, i) in gifts" :key="i">{{ gift }}</p>
          </div>
        </div>
        <div>
          <span>花呗分期</span>
          <p>
            花呗分期付款：月供<span>￥{{ proData.monthly }}</span
            >起
          </p>
        </div>
        <div @click="dialogVisible = true">婚礼报价</div>
      </div>
      <div class="right">
        <div class="card" :class="{ fix_card: cardFixed }">
          <img src="@/assets/img/crown00528.png" alt="" />
          <img
            :src="'/companys/' + comData.clogo"
            @click="gotoCom(comData.cid)"
            alt=""
          />
          <div>
            <span>{{ comData.cname }}</span>
            <img src="@/assets/img/diomand04548.png" alt="" />
            <img src="@/assets/img/freebuy04656.png" alt="" />
          </div>
          <div>
            <span @click="dialogVisible = true">一键报价</span>
            <span>在线咨询</span>
          </div>
          <div>
            <div>
              <img src="@/assets/img/011182135.png" alt="" />
              <span>{{ comData.rates }}条</span>
            </div>
            <span>100%好评</span>
          </div>
        </div>
      </div>
    </div>
    <div class="details_content">
      <div ref="params" id="params" class="content_left">
        <div ref="bar" class="bar" :class="{ 'fix-bar': navBarFixed }">
          <a :class="{ active: choose === 0 }" @click="toParams">套餐参数</a>
          <a :class="{ active: choose === 1 }" @click="toPic">图文详情</a>
        </div>
        <div class="details_frame">
          <div class="params_title">
            <img src="@/assets/img/detailstar3132320.png" alt="" />
            <h2>套餐参数</h2>
          </div>
          <div class="params_details" v-html="proData.params"></div>
          <div ref="pic" id="pic" class="pic_title">
            <img src="@/assets/img/detailstar3132320.png" alt="" />
            <h2>图文详情</h2>
          </div>
          <div class="pic_details" v-html="pic_details"></div>
        </div>
      </div>
      <div ref="content_right" class="content_right">
        <h2>同类热卖</h2>
        <hot-sell-cell
          v-for="item in ranList"
          :key="item.pid"
          :item="item"
        ></hot-sell-cell>
      </div>
    </div>

    <el-dialog
      center
      width="40%"
      :visible.sync="dialogVisible"
      @close="closeDialog"
    >
      <h1>询问底价</h1>
      <el-input
        @blur="checkPhone"
        v-model="phone"
        class="input"
        placeholder="输入手机号"
      ></el-input>
      <span :style="{ visibility: isVisibility }">请输入正确格式手机号</span>
      <div>
        <el-input
          v-model="code"
          class="input"
          placeholder="输入4位手机验证码"
        ></el-input>
        <span @click="sendCode" :class="{ disabled: sendCodeDisabled }">{{
          sendCodeContent
        }}</span>
      </div>
      <el-button @click="open" :plain="true" class="preOrder"
        >立即预约</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import HotSellCell from "@/components/HotSellCell.vue"
export default {
  components: { HotSellCell },
  computed: {
    pic_details() {
      return this.proData.details.replace(/src=".\/pic/g, 'src="/companys')
    },
    gifts() {
      return this.proData.gifts.split(",")
    },
    picList() {
      return this.proData.pics.split("=")
    },
  },
  data() {
    return {
      proData: null,
      comData: null,
      now: 0,
      ranList: null,
      navBarFixed: false,
      cardFixed: false,
      barOffsetTop: null,
      choose: 0,
      dialogVisible: false,
      isVisibility: "hidden",
      phone: "",
      code: "",
      sendCodeDisabled: false,
      sendCodeContent: "获取验证码",
      timer: "",
    }
  },
  methods: {
    closeDialog() {
      this.phone = ""
      this.code = ""
      this.isVisibility = "hidden"
      clearInterval(this.timer)
      this.sendCodeContent = "获取验证码"
      this.sendCodeDisabled = false
    },
    open() {
      if (this.code === "1111") {
        this.$message({
          message: "马上会有客户专员联系您",
          type: "success",
        })
        this.dialogVisible = false
      } else {
        this.$message.error("请输入正确的验证码")
      }
    },
    checkPhone() {
      const reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (reg.test(this.phone)) {
        this.isVisibility = "hidden"
        return true
      } else {
        this.isVisibility = "visible"
        return false
      }
    },
    sendCode() {
      if (this.checkPhone()) {
        this.sendCodeDisabled = true
        let seconds = 59
        this.sendCodeContent = seconds-- + "秒"
        this.timer = setInterval(() => {
          this.sendCodeContent = seconds-- + "秒"
          if (seconds < 0) {
            clearInterval(this.timer)
            this.sendCodeContent = "获取验证码"
            this.sendCodeDisabled = false
          }
        }, 1000)
      }
    },
    gotoCom(cid) {
      this.$router.push("/company?cid=" + cid)
    },
    getProData() {
      const url = "/companys/productDetails?pid=" + this.$route.query.pid
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.proData = res.data.data[0]
      })
    },
    getComData() {
      const url = "/companys/proCom?pid=" + this.$route.query.pid
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.comData = res.data.data[0]
      })
    },
    getRanData() {
      const url = "/companys/productsRandom?n=10"
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.ranList = res.data.data
      })
    },

    watchScroll() {
      if (this.$refs.bar && this.$refs.content_right && this.$refs.pic) {
        // 滚动的距离
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
        // console.log(this.$refs.bar.offsetTop)
        if (this.navBarFixed === false) {
          this.barOffsetTop = this.$refs.bar.offsetTop
        }

        // 容器的高度
        // var offsetTop = document.querySelector(".bar").offsetTop

        // console.log("scrollTop=>", scrollTop)

        //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
        if (scrollTop > this.barOffsetTop) {
          this.navBarFixed = true
        } else {
          this.navBarFixed = false
        }

        let cardTarget =
          this.$refs.content_right.offsetTop +
          this.$refs.content_right.offsetHeight
        // console.log(scrollTop, cardTarget)
        if (scrollTop > cardTarget) {
          this.cardFixed = true
        } else {
          this.cardFixed = false
        }

        let picOffsetTop =
          this.$refs.pic.offsetTop - this.$refs.bar.offsetHeight - 10
        if (scrollTop > picOffsetTop) {
          this.choose = 1
        } else {
          this.choose = 0
        }
      }
    },
    toPic() {
      this.choose = 1
      if (this.$refs.pic && this.$refs.bar) {
        let target = this.$refs.pic.offsetTop - this.$refs.bar.offsetHeight
        document.documentElement.scrollTop = target
      }
    },
    toParams() {
      this.choose = 0
      if (this.$refs.params) {
        let target = this.$refs.params.offsetTop
        document.documentElement.scrollTop = target
      }
    },
  },
  mounted() {
    this.getProData()
    this.getComData()
    this.getRanData()
    // 事件监听滚动条

    window.addEventListener("scroll", this.watchScroll)
  },
  destroyed() {
    // 移除事件监听
    window.removeEventListener("scroll", this.watchScroll)
  },
  watch: {
    $route() {
      this.getProData()
      // this.$router.go(0)
    },
  },
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 1200px;
  margin: 10px auto;
  ::v-deep .el-breadcrumb__inner {
    color: #666;
  }
  ::v-deep .el-breadcrumb__inner.is-link {
    color: #999;
    font-weight: normal;
    &:hover {
      color: #e4464b;
    }
  }
}
.details_header {
  width: 1200px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  // background-color: #eee;
  .left {
    width: 40%;
    > img {
      width: 100%;
    }
    > div {
      display: flex;
      margin-top: 1px;
      //   justify-content: center;
      > img {
        box-sizing: border-box;
        width: 19.7%;
        margin-right: 2px;
        &.active {
          border: 3px solid #e4464b;
        }
      }
    }
  }
  .middle {
    width: 35%;
    position: relative;
    > div:nth-child(2) {
      color: #e4464b;
      display: flex;
      align-items: center;
      margin-top: 10px;
      > span:first-child {
        display: block;
        padding-top: 5px;
        font-size: 20px;
      }
      > span:nth-child(3) {
        display: block;
        text-decoration: line-through;
        color: #999;
        padding-top: 5px;
        margin-left: 10px;
      }
    }
    > p {
      margin-top: 10px;
    }
    > div:nth-child(4) {
      display: flex;
      align-items: center;
      margin-top: 15px;
      > span {
        display: block;
        width: 75px;
        background-color: #fdf1f6;
        height: 25px;
        color: #e4464b;
        line-height: 25px;
        text-align: center;
        margin-right: 12px;
      }
    }
    > div:nth-child(5) {
      display: flex;
      align-items: center;
      margin-top: 15px;
      > span {
        display: block;
        width: 75px;
        background-color: #f1f7fe;
        height: 25px;
        color: #4fa9e6;
        line-height: 25px;
        text-align: center;
        margin-right: 12px;
      }
      > p {
        > span {
          color: #e4464b;
        }
      }
    }
    > div:nth-child(6) {
      background-color: #e4464b;
      width: 130px;
      padding: 10px 0;
      color: #fff;
      text-align: center;
      border-radius: 100px;
      position: absolute;
      bottom: 10px;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .right {
    width: 20%;
    .card {
      width: 240px;
      height: 380px;
      background-color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 10px 15px #f1f1f1;
      border-radius: 5px;
      > img:nth-child(1) {
        position: absolute;
        top: 0;
        right: 10px;
        height: 35px;
      }
      > img:nth-child(2) {
        width: 40%;
        border-radius: 50%;
        margin: 35px auto;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
      > div:nth-child(3) {
        width: 70%;
        margin: 0 auto;
        // display: flex;
        text-align: center;
        > img {
          height: 16px;
          display: inline-block;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
      > div:nth-child(4) {
        display: flex;
        justify-content: space-between;
        width: 85%;

        margin: 25px auto 0;
        padding-bottom: 30px;
        border-bottom: 1px dotted #ddd;
        > span:nth-child(1) {
          display: block;
          padding: 7px 15px;
          background-color: #e4464b;
          color: #fff;
          border-radius: 100px;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
        > span:nth-child(2) {
          display: block;
          padding: 7px 15px;
          background-color: #fff;
          color: #e4464b;
          border-radius: 100px;
          border: 1px solid #e4464b;
          cursor: pointer;
        }
      }
      > div:nth-child(5) {
        display: flex;
        justify-content: space-between;
        width: 85%;
        margin: 25px auto 0;
        > div {
          display: flex;
          align-items: center;
          > img {
            height: 12px;
          }
        }
      }
    }
    .fix_card {
      position: fixed;
      top: 50px;
      z-index: 999;
    }
  }
}

.details_content {
  width: 1200px;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  .content_left {
    overflow: hidden;
    width: 69%;
    box-shadow: -5px 5px 10px -4px #f0f0f0, 5px 5px 10px -4px #f0f0f0;
    .bar {
      height: 60px;
      width: 828px;
      display: flex;
      background-color: #fafafa;
      > a:nth-child(1) {
        display: block;
        line-height: 60px;
        width: 150px;
        text-align: center;
        // background-color: #fff;
        cursor: pointer;
        color: #000;
        box-shadow: 0px -10px 10px -5px #f7f7f7;
        &:hover {
          box-shadow: 0px -10px 10px -5px #f0f0f0;
        }
      }
      > a:nth-child(2) {
        display: block;
        line-height: 60px;
        width: 150px;
        text-align: center;
        color: #000;
        cursor: pointer;
        &:hover {
          box-shadow: 0px -10px 10px -5px #f0f0f0;
          background-color: #fff;
          color: #e4464b;
        }
      }
      a.active {
        background-color: #fff;
        color: #e4464b;
      }
    }
    .fix-bar {
      position: fixed;
      top: 0;
      z-index: 999;
      box-shadow: 0 5px 10px -5px #f0f0f0;
    }
    .details_frame {
      width: 85%;
      margin: 50px auto;
      .params_title {
        padding-bottom: 20px;
        border-bottom: 1px dotted #dddddd;
        display: flex;
        align-items: center;
        > img {
          height: 21px;
          margin-right: 10px;
        }
      }
      .params_details {
        ::v-deep table {
          tr {
            td {
              padding: 3px 0;
              vertical-align: top;
            }
            h3 {
              padding: 15px 0 10px;
            }
          }
        }
      }
      .pic_title {
        margin-top: 40px;
        padding-top: 70px;
        padding-bottom: 20px;
        border-bottom: 1px dotted #dddddd;
        display: flex;
        align-items: center;
        > img {
          height: 21px;
          margin-right: 10px;
        }
      }
      .pic_details {
        margin-top: 20px;
        ::v-deep div {
          > img {
            margin: 0 auto;
            width: 95%;
          }
        }
      }
    }
  }
  .content_right {
    width: 28%;
    height: 100%;
    h2 {
      margin-bottom: 20px;
    }
  }
}
::v-deep .el-button {
  height: 0;
  padding: 0;
  border: none;
}
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
::v-deep .el-dialog__body {
  padding: 0 20px 20px;
  h1 {
    text-align: center;
  }
  .input {
    height: 40px;
    width: 400px;
    display: block;
    margin: 10px auto 0;
    border: 1px solid #d9d9d9;
    outline-color: #5ea7f8;
  }
  > span {
    font-size: 8px;
    display: block;
    width: 400px;
    margin: 0 auto;
    color: #e4464b;
    visibility: hidden;
  }
  > div:nth-child(4) {
    height: 40px;
    width: 400px;
    margin: 0px auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .input {
      height: 100%;
      width: 270px;
      border: 1px solid #d9d9d9;
      outline-color: #5ea7f8;
      margin: 0;
    }
    > span {
      display: block;
      color: #fff;
      height: 100%;
      width: 120px;
      background-color: #e4464b;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      user-select: none;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
      &.disabled {
        background-color: #ccc;
        color: #fff;
        pointer-events: none;
      }
    }
  }
  .preOrder {
    display: block;
    height: 40px;
    width: 400px;
    margin: 30px auto;
    color: #fff;
    background-color: #e4464b;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
